<template>
  <div class="layout-container">
    <div class="menu-container">
      <div class="menu-logo"><img src="@/assets/img/logo-sm.png" alt="Logo"></div>
      <a-menu class="menu-list" :default-selected-keys="defaultMenu" theme="dark" :inline-collapsed="true"
              mode="inline">
        <a-menu-item @click="switchRoute(menu.url)" v-for="menu in menus" :key="menu.key"
                     :class="menu.class">
          <a-icon :type="menu.icon"/>
          <span>{{ menu.name }}</span>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="menu-item-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data () {
    return {
      menus: [
        {
          key: '1',
          name: '项目列表',
          icon: 'profile',
          url: '/Home',
          class: ''
        },
        {
          key: '2',
          name: '公告通知',
          icon: 'notification',
          url: '/Notice',
          class: ''
        },
        {
          key: '3',
          name: '关于我们',
          icon: 'phone',
          url: '/About',
          class: 'menu-phone'
        }
      ],
      defaultMenu: ['1']
    }
  },
  created () {
    // 根据URL动态选择默认选择的菜单
    this.menus.forEach((item) => {
      if (item.url === this.$route.path) {
        this.defaultMenu = [item.key]
      }
    })
  },
  methods: {
    // 切换路由
    switchRoute (url) {
      if (url !== this.$route.path) {
        this.$router.push({ path: url })
      }
    }
  }
}
</script>

<style scoped lang="less">
@menuContainer: 80px;
.layout-container {
  height: 100%;
  display: flex;
}

.menu-logo {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;

  img {
    width: 50px;
    height: 50px;
  }
}

.menu-container {
  width: @menuContainer;
  height: 100%;
}

.menu-list {
  height: 100%;
  padding-top: @menuContainer;
}

.menu-phone {
  position: absolute !important;
  bottom: 50px;
}

.menu-item-container {
  width: calc(100% - @menuContainer);
  background-color: #f6f6f6;
}
</style>
